<?
ini_set("display_errors",1);
include($_SERVER['DOCUMENT_ROOT'].'/includes/functions.inc.php');
include($_SERVER['DOCUMENT_ROOT'].'/portals/config.php');
include($_SERVER['DOCUMENT_ROOT'].'/groups/database.php');

init_session();



include($_SERVER['DOCUMENT_ROOT'].'/portals/header.inc.php');


?>

<h3>Welcome to the Experimental Geograph Portal Section</h3>

<p>A portal is a collection of images forming a subsection of the <a href="http://www.geograph.org.uk/">Geograph Archive</a>, which now has nearly 2 million images.</p>

<p>By creating these themed portals, we hope to make browsing easier, quicker and more fun.</p>

<?

$sql = array();
$sql['columns'] = 'portal.*,realname';
$sql['tables'] = array();
$sql['tables'][] = "portal";
$sql['tables'][] = "LEFT JOIN user USING (user_id)";
$sql['wheres'] = array();

$sql['wheres'][] = "status_id = 1";
$sql['wheres'][] = "public = 'Y'";


$sql['order'] = "portal_id DESC";



$query = sqlMakeQuery($sql);

$data = getAssoc($query);



if ($data) {
	print "<p>TIP: Hover over a thumbnail! <small style=color:silver>(Note: the images are just the first few, with time will select a representative sample)</small></p>";

	foreach ($data as $id => $row) {
		
		$c = getRow("SELECT gridimage_id,grid_reference,title,realname,user_id,COUNT(*) as count FROM p2.gridimage{$id}_bi_view GROUP BY '1'");
		
		if ($c) {
		?>
		  <div style="float:left;position:relative; width:190px; height:220px; padding:2px; text-align:center; border:1px solid silver">
		  <div style="height:80px">
		   <big><b><a href="http://<? echo he($row['domain']); ?>.portal.geographs.org/"><? echo he($row['title']); ?></a></b></big> <small>by
		  	<a href="http://www.geographs.org/portals/profile/<? echo he($row['user_id']); ?>"><? echo he($row['realname']); ?></a> [<? echo $c['count']; ?> images]</small></div>
		
		  <div align="center" style="width:120px;margin-left:auto;margin-right:auto" class="hoverimage" id="<? echo $id; ?>">
		  <a title="<? ehec('grid_reference'); ?> : <? ehec('title'); ?> by <? ehec('realname'); ?> - click to view full size image" href="http://www.geograph.org.uk/photo/<? echo $c['gridimage_id']; ?>" style="border:0"><img src="<? echo gGUc($c); ?>"/></a></div>
		  
	 	 </div>
		<?
		}

	}
	print "<br style=\"clear:both\"/>";
	?>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	

	<script>
	
	var imagesdata = new Object();
	
	$("div.hoverimage").mousemove(function(e){
		var offset = findPos(this); 
		var mouseX = e.pageX - offset[0];
		var portal_id = this.id;
		
		if (imagesdata[portal_id]) {
			if (typeof imagesdata[portal_id] == 'object') {
				var images = imagesdata[portal_id];
				var idx = Math.floor(mouseX/120*images.length);
				
				$("span:first").text("image idx = "+ idx);
				
				$("div.hoverimage#"+portal_id+" img").attr("src",images[idx]['thumbnail']);
				$("div.hoverimage#"+portal_id+" a").attr("href",'http://www.geograph.org.uk/photo/'+images[idx]['gridimage_id']);
				$("div.hoverimage#"+portal_id+" a").attr("title",images[idx]['grid_reference']+' : '+images[idx]['title']+' by '+images[idx]['realname']);
			}
		} else {
			imagesdata[portal_id] = 'placeholder'; //otherwise invokes many times
			loadImages(portal_id);
		}
	});
	
	function findPos(obj){
		var posX = obj.offsetLeft;var posY = obj.offsetTop;
		while(obj.offsetParent){
			if(obj==document.getElementsByTagName('body')[0]){break}
			else{
				posX=posX+obj.offsetParent.offsetLeft;
				posY=posY+obj.offsetParent.offsetTop;
				obj=obj.offsetParent;
			}
		}
		var posArray=[posX,posY]
		return posArray;
	}
	
	function loadImages(portal_id) {
		$.getJSON("/portals/images.ajax.php?portal_id="+portal_id+"&callback=?", function (data) {
				if (data) {
					imagesdata[portal_id] = data;
				}
			});
	}
	
	
	
	</script>
	<?
	
} else {
	print "<p>No Portals to show at this time. <a href=\"edit.php\">Create one</a>!</p>";
}


include($_SERVER['DOCUMENT_ROOT'].'/portals/footer.inc.php');
